<template>
    <div class="bx-editor">
        <van-nav-bar title="理赔材料上传" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)"/>
        <div style="height:50px"></div>

        <div class="list-img" v-for="(item, index) in listSource" :key="index">
            <div class="list-img-title">
                {{item.name}}
            </div>
            <van-uploader v-model="item.value" :after-read="afterRead" @click-preview="$router.push('/upinfoClaim')" @close-preview="$router.go(-1)" :name="index"/>
            <!-- multiple -->
            <!-- multiple -->
        </div>
        <div class="foot-btn">
            <div class="blue-btn" @click="pushInfo()">保存</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "upInfoClaim",
        data() {
            return {
                qiniuToken: {},
                listSource: [],
            };
        },
        methods: {
            getInfoData() {
                let params = {
                    token: localStorage.getItem('token'),
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    order_id: this.$route.query.id
                };
                this.$post("/api/compensate_order_material/edit_field", params)
                    .then(res => {
                        if (res.code == 1) {
                            let newData = []
                            res.data.map((item, index) => {
                                let urlArr = []
                                if (item.value.length !== 0) {
                                    item.value.map((item1, index1) => {
                                        console.log(item1)
                                        let newData = {
                                            url: item1
                                        }
                                        urlArr.push(newData)
                                    })
                                }
                                item.value = urlArr
                            })
                            this.listSource = res.data
                        } else {
                            this.$Toast(res.msg);
                        }
                    })
                    .catch(err => {
                    });
            },
            getQiniuToken() {
                this.$post("/api/qiniu/up_token", {})
                    .then(res => {
                        this.qiniuToken = res
                    })
                    .catch(err => {
                    });
            },
            afterRead(file, detail) {
                let arrName = detail.name
                let arrIndex = detail.index
                this.$Toast.loading({
                    message: '上传中',
                    duration: 0,
                    forbidClick: true
                });
                if (!!file.length) {
                    file.map((item, index) => {
                        let newIndex = arrIndex + index
                        this.$QiniuUpload(this.qiniuToken, item)
                            .then(res => {
                                this.listSource[arrName].value[newIndex].url = this.qiniuToken.domain + res.key
                            })
                            .catch(err => {
                                this.$Toast.clear();
                            });
                    })
                    this.$Toast.clear();
                } else {
                    this.$QiniuUpload(this.qiniuToken, file)
                        .then(res => {
                            this.$Toast.clear();
                            this.listSource[arrName].value[arrIndex].url = this.qiniuToken.domain + res.key
                            console.log(this.listSource, '12345678901234567890');
                        })
                        .catch(err => {
                            this.$Toast.clear();
                        });
                }
            },
            pushInfo() {
                let images = []
                let com_id = []
                let id = []
                let names = []
                this.listSource.map((item, index) => {
                    let urlArr = []
                    item.value.map((item1, index1) => {
                        urlArr.push(item1.url)
                    })
                    images.push(urlArr.join('|'))
                    com_id.push(item.com_id)
                    id.push(item.id)
                    names.push(item.name)
                })
                let params = {
                    token: localStorage.getItem('token'),
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    order_id: this.$route.query.id,
                    id: id.join(','),
                    names: names.join(','),
                    com_id: com_id.join(','),
                    images: images.join(','),
                    // images: 'http://hsyqiniu.3todo.com/1581687826265.jpg,,',
                };
                this.$post("/api/compensate_order_material/edit_save", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.$Toast(res.msg);
                            setTimeout(() => {
                                this.$router.go(-1)
                            }, 1500);
                        } else {
                            this.$Toast(res.msg);
                        }
                    })
                    .catch(err => {
                    });
            },
        },
        created() {
            // 实例创建完成
            this.getInfoData();
            this.getQiniuToken();
        },
        beforeCreate() {
            document.querySelector("body").setAttribute("style", "background-color:#fff");
        }
    }
</script>

<style scoped lang='less'>
    .up-img {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333;
        font-size: 13px;
        padding-right: 15px;
        margin-bottom: 15px;
        margin-top: 20px;

        > div:nth-of-type(1) {
            margin-left: 13px;
            margin-right: 22px;
        }

        .up-icon {
            width: 57vw;
            height: 112px;
        }
    }

    .foot-btn {
        padding-bottom: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 32px;
    }

    .list-img {
        padding: 0 15px 15px;

        .list-img-title {
            color: #333;
            font-size: 16px;
            height: 50px;
            display: flex;
            align-items: center;
        }
    }
</style>